<%= turbo_frame_tag :settings_modal do %>
  <div
    data-modal-target="container"
    data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
    class="currency-and-locale-modal hidden fixed inset-0 overflow-y-auto flex items-end md:items-start justify-center z-[9999] w-full"
    style="animation-duration: 150ms;">
    <div class="w-full lg:w-[600px] relative h-auto lg:max-h-screen flex justify-center flex-col gap-4 bg-background p-5 border border-default mt-12">
      <button
      type="button"
      data-action="modal#close"
      class="absolute top-5 right-5">
        <%= render 'spree/shared/icons/close' %>
      </button>
      <h3 class="text-lg font-bold"><%= Spree.t("i18n.localization_settings") %></h3>
      <%= form_with url: spree.settings_path, method: :put, class: 'flex flex-col gap-4', data: {turbo: false} do |f| %>
        <% if should_render_currency_dropdown? %>
          <div class="flex flex-col gap-2">
            <%= f.label :switch_to_currency, Spree.t(:currency), class: 'text-xs text-neutral-600' %>
            <%= f.select :switch_to_currency, options_for_select(supported_currency_options, current_currency) %>
          </div>
        <% end %>
        <% if should_render_locale_dropdown? %>
          <div class="flex flex-col gap-2">
            <%= f.label :switch_to_locale, Spree.t("i18n.language"), class: 'text-xs text-neutral-600' %>
            <%= f.select :switch_to_locale, options_for_select(supported_locales_options, current_locale) %>
          </div>
        <% end %>
        <%= f.submit Spree.t("actions.save"), class: 'btn-primary' %>
      <% end %>
    </div>
  </div>
<% end %>
